<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
                  show-icon/>

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch',  'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('postage.quick Search Fields') })"
        ></TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef"></Table>

        <!-- 表单 -->
        <PopupForm ref="childer"/>
    </div>
</template>

<script setup lang="ts">
import {onMounted, provide, ref} from 'vue'
import {useI18n} from 'vue-i18n'
import PopupForm from './popupForm.vue'
import {baTableApi} from '/@/api/common'
import {defaultOptButtons} from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import createAxios from "/@/utils/axios";
import {cloneDeep} from "lodash-es";
import {useAdminInfo} from "/@/stores/adminInfo";

defineOptions({
    name: 'postage',
})

const {t} = useI18n()
const tableRef = ref()
const childer = ref()


const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/Postage/'),
    {
        pk: 'id',
        extend:{
            'tooltip-effect':'dark'
        },
        column: [
            {type: 'selection', align: 'center', operator: false},
            // {label: t('postage.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom'},
            // { label: t('postage.type'), prop: 'type', align: 'center', render: 'tag', operator: 'eq', sortable: false, replaceValue: { '1': t('postage.type 1'), '2': t('postage.type 2') } },

            { label: t('postage.shop__name'),show:useAdminInfo().admin_type != 1 ? false :true,width:150, prop: 'shop.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            // {label: t('postage.sweight'), prop: 'sweight', align: 'center', operator: 'RANGE', sortable: false},
            {label: t('postage.sprice'), prop: 'sprice', align: 'center', operator: 'RANGE', sortable: false},
            // {label: t('postage.xweight'), prop: 'xweight', align: 'center', operator: 'RANGE', sortable: false},
            // {label: t('postage.xprice'), prop: 'xprice', align: 'center', operator: 'RANGE', sortable: false},
            // { label: t('postage.citys_ids'), prop: 'citys_ids', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            { label: t('postage.city_json'), prop: 'city_json', align: 'left', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false, width:"500", render: "customTemplate", customTemplate: (row: TableRow, field: TableColumn, value: any, column: TableColumnCtx<TableRow>, index: number) => {
                    return '<div><div>' +
                        '<span style="display: -webkit-box;\n' +
                        '  word-break:break-all;\n' +
                        '  -webkit-box-orient: vertical;\n' +
                        '  -webkit-line-clamp: 1;\n' +
                        '    text-overflow: ellipsis;  /*超出显示为省略号*/\n' +
                        '  word-wrap: break-word;\n' +
                        '  overflow: hidden;\n' +
                        '    overflow-wrap: break-word;" >' + value + '</span></div>' +
                        '' +
                        '</div>'
                        ;

                } },
            /*<button  @click="mores" aria-disabled="false" style="size :small" type="button" class="el-button"<span class="">查看更多</span></button>*/
            // <el-button class="el-button el-button--primary"  @click="more_city">更多</el-button>
            // { label: t('postage.citys'), prop: 'citys', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            {
                label: t('postage.create_time'),
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
            },
            {
                label: t('postage.update_time'),
                prop: 'update_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss'
            },
            {label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false},
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {
            type: '1',
            sweight: '',
            sprice: '',
            xweight: '',
            xprice: '',
            citys_ids: null,
            citys: null,
            city_json: null
        },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})


const data = ref([])


baTable.requestEdit = (id) => {

    createAxios({
        url: '/admin/postage/get_city?id=' + id,
        method: 'get',
        data: {
            id: id,
        }
    }, {}, {})
        .then((res) => {
            baTable.form.extend.city_list = res.data.city


        })
        .catch((resx) => {
        })


    baTable.form.loading = true
    baTable.form.items = {}
    return baTable.api
        .edit({
            [baTable.table.pk!]: id,
        })
        .then((res) => {
            baTable.form.items = res.data.row
            baTable.runAfter('requestEdit', {res})
        })
        .catch((err) => {
            baTable.toggleForm()
            baTable.runAfter('requestEdit', {err})
        })
        .finally(() => {
            baTable.form.loading = false
        })

}

/**
 * 打开表单
 * @param operate 操作:Add=添加,Edit=编辑
 * @param operateIds 被操作项的数组:Add=[],Edit=[1,2,...]
 */
baTable.toggleForm = (operate = '', operateIds: string[] = []) => {

    if (operate == 'Add'){

        createAxios({
            url: '/admin/postage/get_city',
            method: 'get',
            data: {
                id: '',
            }
        }, {}, {})
            .then((res) => {
                baTable.form.extend.city_list = res.data.city
            })
            .catch((resx) => {
            })

    }

    if (baTable.runBefore('toggleForm', { operate, operateIds }) === false) return
    if (baTable.form.ref) {
        baTable.form.ref.resetFields()
    }
    if (operate == 'Edit') {
        if (!operateIds.length) {
            return false
        }
        baTable.requestEdit(operateIds[0])
    } else if (operate == 'Add') {
        baTable.form.items = cloneDeep(baTable.form.defaultItems)
    }
    baTable.form.operate = operate
    baTable.form.extend.title = ''
    baTable.form.operateIds = operateIds
    baTable.runAfter('toggleForm', { operate, operateIds })
}




const mores = (id) => {
    console.log(id)
}


const more_city = () => {
    console.log(0)
}

</script>

<style scoped lang="scss"></style>
